<template>
  <div class="head" >
    <div class="head-nav">`
      <div class="nav-img">
        <img src="" alt="">
      </div>
      <div>
        <div class="nav-login">
          您好！ {{adminName}}[超级管理员]&nbsp;&nbsp;|&nbsp;&nbsp; <span class="H-span" @click="LoginOut">[退出]</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span class="H-span">站点首页</span>
        </div>
        <div class="nav-type">
          <ul class="nav">
            <li v-for="(val,name) in items" v-on:click="mgsType(name,val.name)" class="panel" :class= "{active:name == num}" :key="name">{{val.name}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="head-body">
      <div class="body-left">
        <div class="left-left" style="width: 80%;">
          <el-tree :data="cp"
                   default-expand-all
                   highlight-current
                   @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="left-right">

        </div>
      </div>
      <div class="body-right">
        <div class="Dlan">
          首页>{{stair}} <i v-if="second!=''">>{{second}}</i>
          <el-button class="map" size="mini" type="info" v-on:click="map=true">后台地图</el-button>
        </div>
        <router-view v-if="isRouterAlive"></router-view>
      </div>

    </div>
    <div class="map-list" v-show="map">
      <h3>后台地图 <span v-on:click="map=false">X</span></h3>
      <div class="map-body">
        <div class="map-1" v-for="(val,name,index) in items" :key="index">
          <h4>{{val.name}}</h4>

          <!--          <el-card class="box-card" v-for="(value,name) in val.content" v-if="value.children" :key="name">
                       <div slot="header" class="clearfix">
                         <span>{{value.label}}</span>
                       </div>
                       <div v-for="(ivalue,index) in value.children" :key="index" class="text item">
                        {{ivalue.label}}
             </div>
           </el-card> -->
          <dl v-for="(value,name) in val.content" v-if="value.children" :key="name">
            <dt>{{value.label}}</dt>
            <dd v-for="(ivalue,index) in value.children" :key="index" @click="handleNodeClick(ivalue)">{{ivalue.label}}</dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  //  bimport '@/js/reques.js'
  export default {
    name:'Head',
    provide() { // 注册一个方法
      return {
        reload: this.reload,
        isRouterAlive: true
      }
    },
    data () {
      return{
        admin:'超级管理员',
        mod:'Body',
        adminName:'',
        stair:'我的面板',
        second:'',
        isRouterAlive: true,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        items:[
          {
            name:'我的面板',
            id:'amend',
            content:[{
              label:'个人信息',
              children:[{label:'修改密码',name:'ChPass',limits:1}]
            },
            ]
          },
          {
            name:'设置',
            id:'system',
            content:[
              {
                label:'系统设置',
                children:[{label:'基本参数设置',name:'Parameter',limits:0},
                  {label:'缓存机制设置',name:'Cache',limits:0},
                  {label:'直播服务器设置',name:'Server',limits:0},
                  {label:'收益分成设置',name:'Earnings',limits:1},
                  // {label:'直播遵守协议设置',name:'Protocol',limits:1},
                  // {label:'短视频设置',name:'Video',limits:1},
                  {label:'首页轮播图设置',name:'Slide',limits:1},
                  // {label:'系统公告设置',name:'Notice',limits:1},
                  {label:'启动页广告',name:'Startup'}


                ]
              },
              {
                label:'管理设置',
                children:[{label:'管理员管理',name:'Admin',limits:0}]
              }
            ]

          },
          {
            name:'直播',
            id:'users',
            content:[{label:'用户管理',
              children:[{label:'所有用户列表',name:'Uall',limits:1},
                {label:'签约主播列表',name:'Contract',limits:1},
                {label:'在播房间列表',name:'ULine',limits:1},
                {label:'删除主播列表',name:'UDel',limits:1},
                // {label:'主播类别设置',name:'Category',limits:1},
                {label:'主播等级设置',name:'Grade',limits:1},
                {label:'财富等级设置',name:'Rgrade',limits:1},
                {label:'实名审核',name:'Examine'},
                // {label:'vip等级设置',name:'VipGrade',limits:1},
                // {label:'段位等级设置',name:'DanGrade',limits:1},
                {label:'举报查看',name:'Report',limits:1}
              ]
            },
              {
                label:'礼物设置',
                children:[
                  //{label:'礼物分类设置',name:'Gclass',limits:1},
                  {label:'所有礼物列表',name:'Gall',limits:1}]
              },
              {
                label:'靓号管理',
                children:[{label:'所有靓号列表',name:'Nall',limits:1},
                  // {label:'批量添加靓号',name:'Bbnumber',limits:1}
                ]
              },
              {label:'游戏设置',
                children:[{label:'魔方游戏设置',name:'Rgame',limits:1},
                  {label:'魔方中奖纪录',name:'Win',limits:1},
                  // {label:'红包设置',name:'Packet',limits:1},
                ]
              }
            ]
          },
          {
            name:'财务',
            id:'pay',
            content:[{
              label:'在线支付',
              children:[{label:'接口参数设置',name:'PayApi',limits:0}]
            },
              {
                label:'财务管理',
                children:[{label:'用户充值纪录',name:'Recharge',limits:1},
                  {label:'用户打赏记录',name:'Consume',limits:1},
                  {label:'管理员加值记录',name:'AdminRecord',limits:1}]
              },
              {
                label:'主播结算',
                children:[{label:'主播收礼记录',name:'Detail',limits:1},
                  {label:'主播提现申请',name:'Aaccount',limits:1}]
              },
              {
                label:'工会结算',
                children:[{label:'工会收入',name:'Udetail',limits:1},
                  {label:'工会结算记录',name:'Uaccount',limits:1}]
              },
              // {
              //   label:'充值代理结算',
              //   children:[{label:'代理收入',name:'Pdetail',limits:1},
              //             {label:'代理结算记录',name:'Paccount',limits:1}]
              // },
            ]
          },
          // {
          //   name:'界面',
          //   id:'template',
          // content:[{label:'模板管理',children:[{label:'模板风格',name:'manner',limits:1}]}]
          // },
          {
            name:'数据库',
            id:'sql',
            content:[{label:'数据库',children:[{label:'数据库列表',name:'SqlList',limits:1},
                {label:'数据库备份',name:'Sqlbackups',limits:1},
                {label:'数据库还原',name:'Sqlrestore',limits:1}
              ]}]
          },
          // {
          //   name:'报名',
          // id:'draft',
          // content:[{label:'选秀投票管理',children:[{label:'地方赛区类别',name:'Area',limits:1},
          //                                         {label:'选手管理',name:'player',limits:1},
          //                                         {label:'公告管理',name:'Notice',limits:1},
          //                                         {label:'网络报名管理',name:'Dapply',limits:1},
          //                                         {label:'投票系统管理',name:'Vote',limits:1},
          //                                         {label:'首页轮播设置',name:'Home',limits:1},
          //                                         {label:'合作伙伴设置',name:'Cooperator',limits:1},
          //         ]}]
          // },
          // {
          //   name:'活动',
          // id:'classify',
          // content:[{label:'活动分类管理',children:[{label:'活动分类列表',name:'Clist',limits:1}]},
          //          {label:'活动文章管理',children:[{label:'活动文章列表',name:'Alist',limits:1}]},
          //          {label:'活动轮播管理',children:[{label:'图片轮播管理',name:'Plist',limits:1}]}
          // ]
          // },
          {
            name:'工会',
            id:'apply',
            content:[{label:'工会管理',children:[{label:'公会列表',name:'Unrevised',limits:1},
                // {label:'审核通过',name:'Verified',limits:1},
                // {label:'审核未通过',name:'Pass',limits:1},
              ],
            },
              // {label:'工会列表管理',}
            ]},
          {/*****************************************/
            name:'游戏陪玩',
            id:'accompany',
            content:[
              {label:'游戏类型',children:[{label:'类型列表',name:'gameType',limits:1},],  },
              {label:'游戏区服',children:[{label:'区服列表',name:'gameZone',limits:1},],  },
              {label:'游戏审核',children:[{label:'陪玩审核',name:'gameStatusCheck',limits:1},], },
              {label:'CP管理',children:[{label:'CP设置',name:'cpSet',limits:1},], },
              {label:'陪玩标签',children:[{label:'标签设置',name:'labelSetting',limits:1},], },
            ]}
        ],



        num:0,
        mun:'amend',
        mShow:0,
        w:'amend',
        map:false,
        current:''

      }
    },
    computed: {
      currentTabComponent: function () {
        return this.mod
      },
      cp:function(){
        var _this=this
        var cp=[]
        var op=this.num
        // console.log(op)
        cp=this.items[op].content
        return cp
      },
      List:function(){
        var w1=this.w
        var e=[]
        console.log(w1)
        this.list.forEach(function (item, index) {
          var c=item.name

          if(c ===w1){
            e=item.data
          }
        })

        return e
      }
    },
    provide(){
      return {
        reload:this.reload
      }
    },
    methods:{
      reload() {
        this.isRouterAlive = false
        this.$nextTick(function() {
          this.isRouterAlive = true
          console.log('reload')
        })
      },
      mgsType:function(e,p){
        this.num=e
        // console.log(this.items[e].id)
        this.w=this.items[e].id
        this.stair=p
        this.second=''

      },
      handleNodeClick(res){
        //**********报错解决 Error: Avoided redundant navigation to current location: "/Head/gameZone".
        console.log(res)
        if(!!!res.children) {
          this.$router.push({name:res.name})
        }
        //**************************  面包屑显示有问题 加上以下代码
        var _this=this
        this.items.forEach((val,index)=>{
          val.content.forEach(op=>{
            // console.log(op.children)
            op.children.forEach(sub=>{
              if(sub.name==_this.$route.name){
                // console.log(val.name)
                _this.num=index
                this.stair=val.name
                _this.current=sub.name
                this.second=sub.label
                // console.log(this.current)
              }
            })
          })
        })

        // const limits=this.$cookies.get('limits')
        //  if(cp.limits==limits||cp.limits>limits){
        //  this.mod=cp.name
        //  this.second=cp.label
        //  console.log(cp)
        //  this.map=false
        //  }else{
        //            this.$alert('暂无权限', '系统提示', {
        //              confirmButtonText: '确定',
        //              callback: action => {
        //               this.map=false
        //              }
        //            });
        //    console.log(222)
        //  }
      },
      reload () {
        this.isRouterAlive = false
        this.$nextTick(() => (this.isRouterAlive = true))
      },
      LoginOut(){
        this.$cookies.remove('token')
        this.$cookies.remove('adminName')
        this.$router.push('/Login')
      }
    },
    mounted(){
      var _this=this
      this.adminName=this.$cookies.get('adminName')
      this.$nextTick(()=>{
        this.items.forEach((val,index)=>{
          val.content.forEach(op=>{
            // console.log(op.children)
            op.children.forEach(sub=>{
              if(sub.name==_this.$route.name){
                // console.log(val.name)
                _this.num=index
                this.stair=val.name
                _this.current=sub.name
                this.second=sub.label
                // console.log(this.current)
              }
            })



          })
        })
      })

    }
  }
</script>

<style>
  :root{
    --sss:red;
  }
  .head{
    min-width: 1600px;
    position: relative;
  }
  .head-nav{
    width: 100%;
    height: 16vh;
    background-color: #008ACC;
    display: flex;
    position: relative;
  }
  .nav-img{
    width: 200px;
    height: 100%;
  }
  .nav-login{
    color: #fff;
    height: 11vh;
    line-height: 11vh;
  }
  .map{
    float: right;
    margin: 2px 28px 0 0;
    height: 26px;
    line-height: 13px;
    box-shadow: 0px 0px 5px #a5a2a2;

  }
  .map-list{
    width: 600px;
    height: 480px;
    border: 1px solid #1e64c8;
    position: absolute;
    z-index: 1000;
    top: 20vh;
    left: 65vh;
    background-color: #FFFFFF;
  }
  .map-list>h3{
    background-color: #3076d9;
    color: #fff;
    font-size: 16px;
    padding: 2px 5px 5px 5px ;
  }
  .map-list>h3>span{
    float: right;
    padding: 2px 5px 5px 5px ;
  }
  .map-list>.map-body{
    overflow: auto;
    height: 449px;
    display: inline-flex;
    flex-wrap: wrap;
  }
  .map-body>.map-1{
    width: 180px;
    border: 1px solid #A4C0F7;
    margin: 4px;
  }
  .map-1>h4{
    background: #EDF2F8;
    font-weight: bold;
    padding-left: 5px;
  }
  .map-1>dl>dt{
    font-weight: bold;
    padding-left: 10px;
    margin-top: 5px;
  }
  .map-1>dl>dd{
    padding: 4px;
    padding-left: 20px;
  }
  .nav-type{
    position: absolute;
    bottom: 0;
  }
  .head-body{
    width: 100%;
    height: 84vh;
    display: flex;
  }
  .head-left{
    width: 10%;
    height: 100%;
    background-color: #006600;
  }
  .nav{
    float: left;
    display: flex;
  }
  .nav li{
    height: 31px;
    margin-left: 15px;
    padding: 0 15px 0 15px;
    text-align: center;
    line-height: 36px;
    color:#fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .panel{
    background-color: #0099CC;
  }
  .nav li:hover{
    text-decoration:underline;
    cursor: pointer;
    -moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;user-select: none;
  }
  .H-span:hover{
    text-decoration:underline;
  }
  /* .H-span{
     float: right;
   } */
  .active{
    background-color:#fff;
    color:#42B983 !important;
  }
  .body{
    display: flex;
    width: 100%;
  }
  .body-left{
    width: 12%;
    height: 100%;
    background-color: #0093D9;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .body-right{
    width: 88%;
    height: 100%;
  }
  .Dlan{
    width: 100%;
    height: 30px;
    background-color: #CCCCCC;
    line-height: 30px;
  }
  .all{
    width: 98%;
    height: 93%;
    margin: 11px auto ;
    overflow: scroll;
    position: relative;
  }
  .all::-webkit-scrollbar{
    display: none;
  }
  .left-left .el-tree{
    background-color: #0093D9;
    color: #fff;
    padding: 5px 5px;
  }
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
    background-color: rgba(255,255,255,0.3);
    color: #666666 !important;
  }
  .el-tree-node__content:hover{
    background-color: rgba(255,255,255,0.2);
  }

</style>
